<template>
	<view class="details" @touchmove.stop.prevent="() => {}">

		<view class="content_cover" id="content_cover" :style="{'margin-top':statusBarH+'px'}">
			<!-- 返回和分享按钮 -->
			<cover-view class="tubiao">
				<cover-view>
					<cover-image src="/static/image/packageD/zuojiantou.png" style="width: 48rpx;height: 48rpx;"
						@click="clickReturn"></cover-image>
				</cover-view>
				<!-- 	<cover-view>
					<cover-image src="/static/image/packageD/fenxiang.png"
						style="width: 48rpx;height: 48rpx"></cover-image>
				</cover-view> -->
			</cover-view>
			<!-- 封面图  isShow控制显示视频还是图片  第一次进来默认显示封面图-->
			<view class="img_box">
				<image :src="URL+CourseIntroduction.Cover"></image>
			</view>

			<view class="title_box">
				<view class="title">{{CourseIntroduction.Title}}</view>
				<view class="two_box">
					<view class="neirong_box">
						<view class="qianzhui">培训时间：</view>
						<view class="daoshi">{{StartTime}}-{{EndTime}}</view>
					</view>
					<view class="neirong_box">
						<view class="qianzhui">报名截止时间：</view>
						<view class="daoshi">{{CloseTime}}</view>
					</view>
					<view class="neirong_box">
						<view class="qianzhui">培训总人数：</view>
						<view class="daoshi">{{CourseIntroduction.PersonTotal}}</view>
					</view>
					<view class="neirong_box">
						<view style="width: 230rpx;" class="qianzhui">培训地点：</view>
						<view :class="showSpan?'daoshi2':'daoshi1'">{{CourseIntroduction.Address}}
						</view>
						<view @click="clickSpan" v-if="showSpan">...</view>
					</view>

				</view>
				<view class="three_box">
					<view class="Price">
						<span class="fuhao">￥</span>
						<span class="zhengshu">{{Price(CourseIntroduction.Price)}}</span>
						<span class="dian">.</span>
						<span class="xiaoshu">{{Price1(CourseIntroduction.Price)}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="content" id="content" :style="{'width':windowWidth +'px'}">

			<view class="tab_box" id="tab_box">
				培训详情
			</view>
			<!-- 下部分 -->
			<scroll-view scroll-y style="padding-bottom:20rpx;"
				:style="{'height':windowHeight - statusBarH - content_coverH   - tab_boxH - content_but   + 'px'}">
				 <!-- 课程介绍 -->
					<view class="xiangqing_box" v-if="CourseIntroduction.Particulars"
						v-html="CourseIntroduction.Particulars">
					</view>
					<view v-else>
						<u-empty mode="data" icon="/static/recruit/index/qsy.png" width="350">
						</u-empty>
					</view>

			</scroll-view>
		</view>
		<!-- 下方按钮 -->
		<view class="content_but" id="content_but">
			<view class="but_box">
				<view class="left_box" @click="clickCollect">
					<image class="img" v-if="CourseIntroduction.IsCollection" src="/static/image/index/gxqxq1.png">
					</image>
					<image class="img" v-else src="/static/image/index/gxqxq2.png"></image>
					<view>收藏</view>
				</view>
				<view class="right_box" @click="goPay()" v-if="!CourseIntroduction.IsPay">立即报名</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				URL: this.$config.domain.staticUrl,
				title: '',
				list: [],
				PageIndex: 1,
				PageSize: 10,
				CourseVideoId: '',
				UserId: "",
				Total: 0,
				messageList: [],
				CourseId: '', //课程ID
				CourseIntroduction: {}, //课程介绍

				typeNumber: 0,
				statusBarH: '', //状态栏高度
				windowHeight: '', //窗口高度
				windowWidth: '', //窗口宽度
				contentH: '',
				content_coverH: '',
				content_but: '',
				isShow: true, //显示图片还是视频
				videoContext: "", //视频
				showModal: false, //模态框
				content: '该课程需要购买',
				myCover: '', //本账户头像
				showPopup: false, //显示弹出层
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
					name: '匿名',
					disabled: false
				}],
				comment: {
					CourseId: 0, //课程Id
					CourseVideoId: 0, //课时Id
					Content: "", //内容
					Grade: 0, //评分
					IsAnonymous: false, //是否匿名
				},


				startTime: '', //培训开始时间
				showSpan: true, //省略号显示
				tab_boxH: ''

			};
		},
		components: {},
		onLoad(o) {
			const app = getApp()
			this.UserId = app.globalData.user.UserId
			if (o) {
				this.CourseId = o.id
			}
			this.detailsData()
		},
		created() {
			const app = getApp()
			this.statusBarH = app.globalData.statusBarH //状态栏高度
			this.windowHeight = app.globalData.phoneInformation.windowHeight //屏幕高度
			this.windowWidth = app.globalData.phoneInformation.windowWidth
			this.myCover = app.globalData.user.HeadIcon


			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('#content_cover').boundingClientRect(data => {
					this.content_coverH = data.height
					// console.log(data.height);
				}).exec();
				uni.createSelectorQuery().in(this).select('#content_but').boundingClientRect(data => {
					this.content_but = data.height
					// console.log(data.height);
				}).exec();
				uni.createSelectorQuery().in(this).select('#tab_box').boundingClientRect(data => {
					this.tab_boxH = data.height
					// console.log(data.height);
				}).exec();
			})

			this.videoContext = uni.createVideoContext('myVideo', this)

		},
		computed: {
			StartTime() {
				if (this.CourseIntroduction.StartTime) {
					let arr = this.CourseIntroduction.StartTime.split(' ')
					this.startTime = arr[0].split("-")
					return `${this.startTime[0]}年${this.startTime[1]}月${this.startTime[2]}日`
				}
			},
			EndTime() {
				if (this.CourseIntroduction.EndTime) {
					let arr = this.CourseIntroduction.EndTime.split(' ')
					let Time = arr[0].split("-")
					if (Time[0] == this.startTime[0]) {
						return `${Time[1]}月${Time[2]}日`
					} else {
						return `${Time[0]}年${Time[1]}月${Time[2]}日`
					}
				}
			},
			CloseTime() {
				if (this.CourseIntroduction.CloseTime) {
					let arr = this.CourseIntroduction.CloseTime.split(' ')
					let Time = arr[0].split("-")
					return `${Time[1]}月${Time[2]}日`
				}
			}

		},
		methods: {
			// 价格格式调整
			Price(e) {
				let num = Math.floor(e)
				if (num >= 0) {
					return num
				} else {
					return e
				}
			},
			Price1(e) {
				let afterNum = (e % 1).toFixed(2).substring(2)
				if (afterNum >= 0) {
					return afterNum
				}
			},

			// 点击省略号
			clickSpan() {
				// if (this.showSpan) {
				this.showSpan = false;
				console.log(this.showSpan);
				// }
			},

			// 详情数据
			detailsData() {
				this.$http.digitalize.in_person_detail({
					id: this.CourseId
				}).then(res => {
					console.log(res);
					if (res.Success) {
						this.CourseIntroduction = res.Result
						this.CourseIntroduction.OrderType = 2
					}
					console.log(this.CourseIntroduction);
				})
			},


			//点击收藏
			clickCollect() {
				if (this.CourseIntroduction.IsCollection) {
					let Id = {
						courseId: Number(this.CourseId),
					}
					this.$http.digitalize.uncollection(Number(this.CourseId)).then(res => {
						if (res.Success) {
							this.$util.toast("取消收藏")
							this.CourseIntroduction.IsCollection = false
						} else {
							this.$util.toast("取消收藏失败")
						}
					})
				} else {
					let Id = {
						CourseId: this.CourseId,
						Title: this.CourseIntroduction.Title
					}
					this.$http.digitalize.collection(Id).then(res => {
						if (res.Success) {
							this.$util.toast("收藏成功")
							this.CourseIntroduction.IsCollection = true
						} else {
							this.$util.toast("收藏失败")
						}
					})
				}
			},
			// 立即购买
			goPay() {
				// if (this.CourseIntroduction == null) {
				// 	this.payId = this.detailsObj.planServicePackages[0]
				// }
				console.log("购买", this.CourseIntroduction);
				let obj = {
					Id: this.CourseIntroduction.Id,
					Title: this.CourseIntroduction.Title,
					OrderType: this.CourseIntroduction.OrderType,
					Price: this.CourseIntroduction.Price,
					Type: this.CourseIntroduction.Type,
					Code:this.CourseIntroduction.Code//用于苹果支付
				}
				uni.navigateTo({
					// url: "/pages/views/packageD/type-jobhunting/payment/index?tcid=" + encodeURIComponent(JSON
					// 	.stringify(this.CourseIntroduction))
					url: `/pages/views/packageD/type-jobhunting/payment/index?tcid=${JSON.stringify(obj)}`

				})
			},
			// 点击返回按钮
			clickReturn() {
				uni.navigateBack()
			},

		},

	}
</script>

<style lang="scss">
	.details {
		.content_cover {
			background-color: #fff;
			position: relative;

			.img_box {
				image {
					height: 420rpx;
					width: 100%;
				}
			}

			.video_box {
				position: relative;

				.video {
					width: 100%;
					height: 420rpx;
				}
			}

			.tubiao {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row;
				position: fixed;
				z-index: 99999;
				padding: 20rpx 40rpx;
				right: 0;
				left: 0;
				box-sizing: border-box;
			}

			.title_box {
				padding: 30rpx;

				.title {
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
					height: 96rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					/* 设置宽度和高度 */
					width: 100%;
				}

				.two_box {

					padding: 20rpx 0;
					box-sizing: border-box;

					.neirong_box {
						display: flex;

						.qianzhui {
							font-size: 28rpx;
							color: #999999;
							font-family: PingFang SC-Regular;
						}

						.daoshi {
							font-size: 28rpx;
							color: #000000;
							font-family: PingFang SC-Regular;
							overflow: hidden;
							height: 40rpx;
						}

						.daoshi2 {
							font-size: 28rpx;
							color: #000000;
							font-family: PingFang SC-Regular;
							overflow: hidden;
							height: 40rpx;
						}

						.daoshi1 {
							font-size: 28rpx;
							color: #000000;
							font-family: PingFang SC-Regular;
							height: 40rpx;
						}
					}


				}

				.three_box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: flex-end;

					.Price {
						font-family: PingFang SC-Bold;
						color: #F35370;

						.fuhao {
							font-size: 26rpx;
							font-weight: bold;
						}

						.zhengshu {
							font-size: 38rpx;
							font-weight: bold;
						}

						.dian {
							font-size: 42rpx;
						}

						.xiaoshu {
							font-size: 26rpx;
						}
					}
				}
			}
		}

		.content {
			margin-top: 20rpx;
			background-color: #fff;
			box-sizing: border-box;

			.tab_box {
				background-color: #ffffff;
				// position: fixed;
				z-index: 999;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 88rpx;
				border-bottom: 1rpx solid rgba(112, 112, 112, 0.12);
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
				padding-left: 30rpx;
			}

			.xiangqing_box {
				padding: 30rpx;
				box-sizing: border-box;
			}

			.pinglun_box {
				display: flex;
				align-items: center;
				padding: 20rpx 24rpx;

				.pinglun {
					border-top-left-radius: 12rpx;
					border-top-right-radius: 12rpx;
					// background-position: center;
					background-repeat: no-repeat;
					background-size: 100%;
					width: 40rpx;
					height: 40rpx;
					overflow: hidden;
					margin-right: 20rpx;
				}
			}

			.wupinglun {
				padding: 100rpx 0;
				text-align: center;

				image {
					width: 191rpx;
					height: 134rpx;
				}

				view {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #BBBCBD;
					padding-top: 40rpx;
				}
			}
		}

		.content_but {
			padding: 40rpx 0rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			height: 158rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;

			.but_box {
				display: flex;
				justify-content: space-between;
				align-items: center;


				.left_box {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F7F8FA;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					opacity: 1;
					width: 210rpx;
					height: 88rpx;
					margin-right: 20rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #5C5C5C;

					image {
						width: 34rpx;
						height: 31rpx;
						margin-right: 12rpx;
					}
				}

				.right_box {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #3476FE;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					opacity: 1;
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					width: 440rpx;
					height: 88rpx;
				}
			}
		}

		.popup_box {
			.upopup {
				padding: 40rpx 30rpx 0;
				width: 600rpx;


				.upopupnr {
					margin: 30rpx 0rpx;
					height: 200rpx;
					overflow-y: auto;
					display: flex;
					justify-content: center;
					align-items: center;

					.upopupnrtext {
						font-size: 34rpx;
						text-align: center;
					}


				}

				.pingfen_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 30rpx 0rpx;
				}
			}

			.but {
				display: flex;
				justify-content: space-between;
				border-top: 1rpx solid #E7E7E8;

				.quxiao {
					width: 50%;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					padding: 32rpx 0;
					text-align: center;
					border-right: 1rpx solid #E7E7E8;
				}

				.queren {
					width: 50%;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #3476FE;
					text-align: center;
					padding: 32rpx 0;
				}

			}
		}

	}
</style>